// 3.对单个数据进行数据劫持
function defineReactive(_data, key, value) {
    Object.defineProperty(_data, key, {
        get() {
            console.log('正在获取' + key + '的值');
            return value
        },
        set(newVal) {
            if (newVal === value) return
            console.log('正在设置'+key+'的值');
            value = newVal
        }
    })
}

// 2.封装observe函数，接收_data,遍历_data的值，一个个进行数据劫持
function observe(_data) {
    for (let key of Object.keys(_data)) {
        defineReactive(_data, key, _data[key])
    }
}

// 1.封装一个Vue构造函数
function Vue(options) {
    this._data = options.data

    // 数据代理,把_data中的属性取出来，放在vue实例上
    for (let key of Object.keys(this._data)) {
        Object.defineProperty(this, key, {
            get() {
                return this._data[key];
            },
            set(newVal) {
                this._data[key] = newVal;
            },
        });
    }

    // 拿到数据开始进行响应式操作
    observe(this._data)
}

// 实例化Vue
const vm = new Vue({
    data: {
        name: 'laowang',
        count:0,
        course: {
            type: 'easy',
            name: 'html'
        }
    }
})

console.log(vm)

function huoqu(){
    console.log(vm.count);
}
function shezhi(){
    vm.count++
}

// huoqu()
shezhi()